<template>
  <div class="app-container">
    <h3 class="title">全部订单</h3>
    <!-- {{ search }} -->
    <div v-if="setPermissionBtn('/vipOrder/query/page', searchBtn)" class="inputBox">
      <el-input v-model="search.orderNumbers" class="input" placeholder="请输入订单号查询" />
      <el-select v-if="momList.length > 0" v-model="search.vipId" class="select" placeholder="请选择会员等级">
        <el-option :value="''" label="全部" />
        <el-option v-for="item in momList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-input v-model="search.name" class="input" placeholder="请输入购买人查询" />
      <el-input v-model="search.phone" class="input" placeholder="请输购买人手机号查询" />
      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择开始日期"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择结束日期"/>
      <el-select v-model="search.isPay" class="select" placeholder="请选订单状态">
        <el-option :value="''" label="全部" />
        <el-option :value="1" label="已付款" />
        <el-option :value="0" label="未付款" />
      </el-select>
      <el-button type="primary" class="ml10" @click="toSearch">{{ searchBtn.btnName }}</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <!-- <BankView ref="bankDialog" :visible="visible" :dialog-type="'order'" @isDialog="isDialog" />
    <Dialog ref="dialog" :showdialog="showDialog" :bankname="bankName" :tid="tid" :coursesection="courseSection" :orderid="orderId" :bankid="bankId" :type="type" @isDialog="isDialog" />
    <div class="inputBox">
      <el-input v-model="search.orderNum" class="input" placeholder="请输入订单编号查询" width="95"/>
      <el-input v-model="search.title" class="input" placeholder="请输入课程标题查询" />
      <el-input v-model="search.buyer" class="input" placeholder="请输入购买人人查询" />
      <el-input v-model="search.buyPhone" class="input" placeholder="请输入购买人手机号查询" />
      <el-date-picker v-model="search.startTime" class="startDate" type="date" placeholder="选择开始日期"/>
      <el-date-picker v-model="search.endTime" class="endDate" type="date" placeholder="选择结束日期"/>
      <el-select v-model="search.status" class="teacherStatus" placeholder="请选订单状态">
        <el-option label="已付款" value="100" />
        <el-option label="已提现" value="500" />
        <el-option label="退款中" value="650" />
        <el-option label="已退款" value="700" />
        <el-option label="已完成" value="800" />
      </el-select>
      <el-button type="primary" class="ml10" @click="toSearch()">查询</el-button>
      <el-button type="primary" @click="toReset()">重置</el-button>
    </div> -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column label="订单编号" width="130">
        <template slot-scope="scope">
          {{ scope.row.orderNumbers }}
        </template>
      </el-table-column>
      <el-table-column label="会员等级" width="100">
        <template slot-scope="scope">
          {{ scope.row.vipId | formatvipId }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="销售单价">
        <template slot-scope="scope">
          {{ scope.row.unitPrice }}
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="购买数量">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column> -->
      <el-table-column label="总价">
        <template slot-scope="scope">
          {{ scope.row.price }} 元
        </template>
      </el-table-column>
      <el-table-column label="购买人">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="购买人手机号" width="110">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="100">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="地推人员">
        <template slot-scope="scope">
          {{ scope.row.dtName | nullStr }}
        </template>
      </el-table-column>
      <el-table-column label="直推人员">
        <template slot-scope="scope">
          {{ scope.row.ztName | nullStr }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="分销底价">
        <template slot-scope="scope">
          {{ scope.row.salesReservePrice }}
        </template>
      </el-table-column>
      <el-table-column label="分销提成">
        <template slot-scope="scope">
          {{ scope.row.salesCommission }}
        </template>
      </el-table-column>
      <el-table-column label="分享人员">
        <template slot-scope="scope">
          {{ scope.row.promoter }}
        </template>
      </el-table-column>
      <el-table-column label="分享提成">
        <template slot-scope="scope">
          {{ scope.row.promotionCommission }}
        </template>
      </el-table-column> -->
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.isPay === 0">未付款</span>
          <span v-else-if="scope.row.isPay === 1">已付款</span>
          <!-- <span v-else-if="scope.row.status === 200">申请提现</span>
          <span v-else-if="scope.row.status === 300">待放款</span>
          <span v-else-if="scope.row.status === 400">已驳回</span>
          <span v-else-if="scope.row.status === 500">已提现</span>
          <span v-else-if="scope.row.status === 600">申请退款</span>
          <span v-else-if="scope.row.status === 650">退款中</span>
          <span v-else-if="scope.row.status === 700">已退款</span>
          <span v-else-if="scope.row.status === 800">已完成</span> -->
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="240">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('/vipOrder/query', scope.row)"
            value="订单详情"
            size="mini"
            type="warning"
            @click="see(scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/vipOrder/remark/page', scope.row)"
            v-show="scope.row.isPay === 0"
            value="备注"
            size="mini"
            type="primary"
            @click="changeRemarks(userType, scope.row.id, scope.$index, scope.row.isPay)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="scope.row.isPay === 1"
            value="备注"
            size="mini"
            type="success"
            @click="checkRemarks(userType, scope.row.id, scope.$index)">查看备注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <remark :remark-list="remarkList" :remark-visible.sync="remarkVisible" :remark-index="remarkIndex" /> -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <remark
      ref="remarke"
      :remark-list="remarkList"
      :remark-visible.sync="remarkVisible"
      :remark-index="remarkIndex"
    />
    <remarkPropt
      ref="remarke"
      :remark-propt-list="remarkProptList"
      :remark-propt-visible.sync="remarkProptVisible"
      :remark-propt-index="remarkProptIndex"
      :remark-type="'order'"
      :cash-type="-1"
      @remarkText="remarkText" />
    <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'order'" />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
// import BankView from '@/components/Dialog/BankView'
import detail from '@/components/detail'
import Dialog from '@/components/Dialog'
import { Message } from 'element-ui'
import { getOrderList, selectCard, addRemark, getRemarkPage } from '@/api/order'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'
import remark from '@/components/remark'
import remarkPropt from '@/components/remark/remarkPrompt'

import { vipInfoAll } from '@/api/product'

export default {
  components: { Pagination, Dialog, detail, remarkPropt, remark },
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // },
    // 等于之前的level
    formatvipId(vipId) {
      const vipIdMap = {
        1: '泰山美妈',
        2: '泰山美妈团',
        3: '泰山美妈社',
        4: '泰山美妈会'
      }
      return vipIdMap[vipId]
    },

    nullStr(str) {
      if (str === '' || str === null) {
        return '-'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      searchBtn: {},
      momList: [],
      // visible: false,
      remarkProptVisible: false,
      remarkProptList: [],
      remarkProptIndex: -1,
      // 查看备注
      remarkVisible: false,
      remarkList: [],
      remarkIndex: -1,
      userName: '',
      userType: -1,
      //   showDialog: false,
      //   courseSection: '', // 课程金额
      //   bankName: '', // 银行名称
      //   bankId: '', // 银行Id
      //   orderId: '', // 订单Id
      //   type: 1, // 1:提课程款. 2:退佣金
      //   tid: '',
      //   courseTitle: '新增课程',
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      search: {
        orderNumbers: '',
        vipId: null,
        name: '',
        phone: '',
        startTime: '',
        endTime: '',
        isPay: null
      },
      dialogFormVisible: false,
      course: {
        courseName: '',
        sign: '',
        introduce: '',
        address: '',
        imgUrl: '',
        courseType: '',
        teacher: '',
        courseTime: '',
        startTime: '',
        endTime: ''
      },
      dialogTableVisible: false,
      detailIndex: -1,
      permissionShow: false // 权限数据未到达之前按钮隐藏
      // permissionList: [] // 权限数据列表
    }
  },
  computed: {
    // 权限数据的获取
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },

  mounted() {
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  created() {
    this.getUserType()
    this.fetchData()
    this.getMomList()
    // this.getPermissonFn()
  },
  methods: {

    // 获取会员信息
    getMomList() {
      vipInfoAll().then(res => {
        if (res.code === '200') {
          this.momList = res.data
          console.log('momList', this.momList)
        } else {
          Message.error(res.message)
        }
      })
    },
    // 查看备注
    checkRemarks(uid, id, index) {
      console.log('备注id:', id)
      this.remarkIndex = index
      // console.log('--->', uid, id, index)
      // this.remarkVisible = true
      // this.$refs.remarke.request(uid, id)
      // console.log('==>'+JSON.stringify(this))
      getRemarkPage({ vipOrderId: id }).then(res => {
        console.log('查看备注：', res)
        if (res.code === '200') {
          this.remarkList = res.data.list
          if (this.remarkList.length) {
            this.remarkVisible = true
          } else {
            Message.info('暂无备注')
          }
        }
        // userData = res.data
        // console.log(userData)
      })
    },
    // 备注
    changeRemarks(uid, id, index, isPay) {
      this.remarkProptIndex = index
      console.log('--->', uid, id, index)
      const userData = ''
      this.remarkProptVisible = true
      this.remarkProptList = [{ isPay }]
      // console.log(this.$refs.remarke)
      this.$refs.remarke.request(uid, id, isPay)
    },
    remarkText() {
      this.fetchData()
    },
    getUserType() {
      switch (getLocalUserName()) {
        case 'admin':
          this.userType = 1
          break;
        case 'sale':
          this.userType = 2
          break;
        case 'casher':
          this.userType = 3
          break;
      }
    },
    // 查询
    toSearch() {
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'
      this.listLoading = true
      console.log(this.search)
      const newData = this.objectCon(this.listQuery, this.search)
      // console.log(this.search.startTime)
      // console.log(this.search.endTime)
      getOrderList(newData).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 重置
    toReset() {
      this.search.orderNumbers = ''
      this.search.vipId = ''
      this.search.name = ''
      this.search.phone = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.isPay = ''
    },
    // isDialog(a) {
    //   this.visible = false
    //   this.showDialog = false
    // },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      console.log('newData:=>', newData)
      getOrderList(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    },
    see(index) {
      this.dialogTableVisible = true
      this.detailIndex = index
    }
    // submit(oid, tid, courseSection) {
    //   const self = this;
    //   selectCard(tid).then(res => {
    //     // console.log(res.data)
    //     if (!(res.code === '200')) return false;
    //     if (res.data.id == null) {
    //       // 未获取到银行卡信息
    //       self.$message({
    //         showClose: true,
    //         message: '未绑定银行卡信息，请先绑定！',
    //         type: 'warning'
    //       });
    //       setTimeout(() => {
    //         this.$refs.bankDialog.getMsg(tid)
    //         self.visible = true
    //       }, 1.5 * 1000)
    //     } else {
    //       // 已获取到银行卡信息
    //       self.type = 1
    //       this.$refs.dialog.changeText(self.type)
    //       self.bankId = res.data.id
    //       self.orderId = oid
    //       self.bankName = res.data.bankName
    //       self.courseSection = courseSection
    //       self.tid = tid
    //       self.showDialog = true
    //     }
    //   })
    // },
    // refund(oid, tid, orderCommission) {
    //   const self = this;
    //   selectCard(tid).then(res => {
    //     if (!(res.code === '200')) return false;
    //     if (res.data == null) {
    //       // 未获取到银行卡信息
    //       self.$message({
    //         showClose: true,
    //         message: '未绑定银行卡信息，请先绑定！',
    //         type: 'warning'
    //       });
    //       setTimeout(() => {
    //         this.$refs.bankDialog.getMsg(tid)
    //         self.visible = true
    //       }, 1.5 * 1000)
    //     } else {
    //       // 已获取到银行卡信息
    //       // console.log(res.data)
    //       self.type = 2
    //       this.$refs.dialog.changeText(self.type)
    //       self.bankId = res.data.id
    //       self.orderId = oid
    //       self.bankName = res.data.bankName
    //       self.courseSection = orderCommission
    //       self.tid = tid
    //       self.showDialog = true
    //     }
    //   })
    // },
    // edit(pid, index) {
    //   this.$data.dialogFormVisible = true
    //   this.$data.courseTitle = '编辑课程'
    //   this.$data.course = this.$data.list[index]
    // },
    // getValue(value) {
    //   this.$data.course.status = value
    // }
  }
}
</script>
<style lang="scss" scoped>
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 200px }
    .input:nth-of-type(3){ width: 150px }
    .input:nth-of-type(4){ width: 180px }
    .select:nth-of-type(2){width:150px}
    .select:nth-of-type(7){width:140px}
    .startDate, .endDate{ width: 180px }
  }
</style>
